<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/src/css/tpl.css">
    <style>
        .custom {
            position: absolute;
            transition: transform 0.3s ease;
            transform-origin: center center;
            color: rgb(34, 0, 255);
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <audio class="audio" hidden src="/kirby-portal.wav" controls loop></audio> -->
        <kirby-fly class="custom" xoffset="200" yoffset="200" color="rgb(34, 0, 255)" width="110px" height="100px"></kirby-fly>
        <kirby-fly class="custom" xoffset="600" yoffset="-300" color="#17c757" width="110px" height="100px"></kirby-fly>
        <kirby-fly class="custom" xoffset="600" yoffset="300" color="#03e9db" width="110px" height="100px"></kirby-fly>
        <kirby-fly class="custom" xoffset="400" yoffset="160" color="#326BF7" width="210px" height="200px"></kirby-fly>

        <kirby-fly class="custom" xoffset="200" yoffset="200" color="#FCC5DA" width="130px" height="110px"></kirby-fly>
    </div>
</body>
<script type="module" src="/src/pages/fly/main.ts"></script>

<script>
    const $ = (className) => document.querySelectorAll(className)

    let positionConfig = [
        {   
            posX: 300,
            posY: 130,
            speedX: 1,
            speedY: 4,
            size: 110
        },
        {   
            posX: 500,
            posY: 700,
            speedX: 2,
            speedY: 1,
            size: 110
        },
        {   
            posX: 200,
            posY: 190,
            speedX: 1,
            speedY: 1,
            size: 110
        },
        {   
            posX: 600,
            posY: 700,
            speedX: 3,
            speedY: 2,
            size: 130
        },
        {   
            posX: 100,
            posY: 100,
            speedX: 3,
            speedY: 2,
            size: 130
        }
    ]
    
    document.addEventListener('DOMContentLoaded', () => {
        let { innerHeight, innerWidth } = window;

        $('.custom').forEach((v,i) => {
            let kb = v.shadowRoot.querySelector('.kirby-fly')
            kb.config = positionConfig[i]
            // 开始动画
            updatePosition(kb);
        })

        function updatePosition(element) {
            // 更新方块位置
            element.config.posX += element.config.speedX;
            element.config.posY += element.config.speedY;

            // 检测碰撞（屏幕边缘）
            if (element.config.posX <= 0 || element.config.posX >= innerWidth - element.config.size) {
                element.config.speedX *= -1; // X轴反向
                const currentTransform = window.getComputedStyle(element).transform;

                // 合并新的 rotateY 变换（注意顺序：新变换在前）
                const newRotate = element.config.speedX > 0 ? 'rotateY(0)' : 'rotateY(180deg)';

                element.style.transform = currentTransform === 'none' 
                    ? newRotate 
                    : `${newRotate} ${currentTransform}`;
            }

            if (element.config.posY <= 0 || element.config.posY >= innerHeight - element.config.size) {
                element.config.speedY *= -1; // Y轴反向
            }

            // 应用新位置
            
            element.style.left = element.config.posX + 'px';
            element.style.top = element.config.posY + 'px';

            // 循环调用动画 
            requestAnimationFrame(updatePosition.bind(null, element));
        }

        // 窗口大小变化时重置边界检测
        // window.addEventListener('resize', () => {
        //     if (posX > innerWidth - size) posX = innerWidth - size;
        //     if (posY > innerHeight - size) posY = innerHeight - size;
        // });
       
    });





    // let customElement = document.querySelector('.custom');
    // console.dir(customElement);
    // setTimeout(() => {
    //     customElement.item = [
    //         { id: 1, name: '张三' },
    //         { id: 2, name: '李四' },
    //         { id: 3, name: '王五' }
    //     ]
    // }, 2000);

    // const html = $("html")
    // let mousePositions = [];
    // let mouseStopTimer = null;
    // let isFollowing = false;
    // let followIndex = 0;
    // let animationId = null;
    // let kirbyArr = [];


    
 
    // html.onclick = (e) => $('.audio').play()

    // document.addEventListener('DOMContentLoaded', () => {
    //     allKirbyElement.forEach((item, index) => {
    //         let c = item.shadowRoot.querySelector('.kirby-fly')
    //         kirbyArr.push(c)
    //     });
    // });

    // html.onmousemove = (e) => {
    //     clearTimeout(mouseStopTimer);

    //     const x = e.clientX;
    //     const y = e.clientY;

    //     mousePositions.push({ x, y })

    //     if (mousePositions.length > 100) {
    //         mousePositions.shift();
    //     }

    //     mouseStopTimer = setTimeout(() => {
    //         if (!isFollowing && mousePositions.length > 0) {
    //             startFollowing();
    //         }
    //     }, 300);
    // }


    // const startFollowing = () => {
    //     isFollowing = true;
    //     followIndex = 0;

    //     if (animationId) {
    //         cancelAnimationFrame(animationId);
    //     }

    //     animateFollower();
    // }

    // const animateFollower = () => {
    //     if (followIndex < mousePositions.length) {
    //         const pos = mousePositions[followIndex];
    //         let kirby = kirbyArr[followIndex % kirbyArr.length];
    //         kirby.style.left = `${pos.x - kirby.getAttribute("xoffset")}px`;
    //         kirby.style.top = `${pos.y - kirby.getAttribute("yoffset")}px`;
    //         followIndex++;
    //         animationId = requestAnimationFrame(animateFollower);
    //     } else {
    //         isFollowing = false;
    //         mousePositions = [];
    //     }
    // }

    // window.addEventListener('beforeunload', () => {
    //     if (animationId) {
    //         cancelAnimationFrame(animationId);
    //     }
    // });

</script>

</html>